<template>
	<view class="activateMembership">
		<view class="header">
			<view class="left">
				<image :src="photo" mode=""></image>
				<view class="info">
					<view v-if="nickName" class="top">
						{{nickName}}
					</view>
					<view class="bot">
						{{attributes}}
					</view>
				</view>
			</view>
			<view class="tags" :class="[bgColor]"> {{ cardTypeName}}
				<!-- 基础VIP -->
			</view>
		</view>
		<view class="package">
			<view class="title">
				会员套餐
			</view>
			<view class="list">
				<view class="item" @click="tab(index,item)" v-for="(item,index) in priceList"
					:class="[cur==index?'active':'']">
					<view class="tag">
						{{item.name}}
					</view>
					<view class="day">
						{{item.expDayNumDesc}}
					</view>
					<view class="money">
						<text class="old">￥{{item.originalPrice}}</text>
						<text class="now">
							￥
							<text>{{item.salePrice}}</text>
						</text>
					</view>
					<view class="service">
						{{item.serviceCountDesc}}
					</view>
				</view>
			</view>
		</view>
		<!-- 原会员套餐 -->
		<view v-if="curInfo && curInfo.originalVIPInfo && JSON.stringify(curInfo.originalVIPInfo) != '{}'" class="old">
			<view class="title">
				原会员套餐
			</view>
			<view class="title1">
				{{curInfo.originalVIPInfo.name}}
			</view>
			<view class="listbox">
				<view class="items1">
					<view class="left">
						实付
					</view>
					<view class="right">
						¥{{curInfo.originalVIPInfo.amount}}
					</view>
				</view>
				<view class="items1">
					<view class="left">
						剩余天数
					</view>
					<view class="right">
						{{curInfo.originalVIPInfo.expDayNum}}天
					</view>
				</view>
				<view class="items1">
					<view class="left">
						本次升级可抵扣金额
					</view>
					<view class="right">
						-¥{{curInfo.originalVIPInfo.deductionAmount}}
					</view>
				</view>


			</view>
		</view>

		<view v-if="curInfo && curInfo.originalVIPInfo && JSON.stringify(curInfo.originalVIPInfo) != '{}'" class="tips">
			<image src="../../static/uview/example/js.png" mode=""></image>
			<view class="infos">
				<!-- 升级规则： -->{{curInfo.originalVIPInfo.upgradeRule}}
			</view>
		</view>
		<view v-if="curInfo && curInfo.payableAmount" class="old u-m-t-30">
			<view class="listbox">
				<view class="items1">
					<view class="left">
						本次应付金额
					</view>
					<view class="right pay">
						¥{{curInfo.payableAmount}}
					</view>
				</view>
			</view>
		</view>

		<!-- 支付截图 -->
		<view class="photos">
			<view class="tit">
				<view class="left">
					<text>支付截图</text>
					<text>（最多3张）</text>
				</view>

			</view>
			<view class="">
				<!-- upload-text="上传附件" -->
				
				<u-upload :width="148" :height="148" maxCount="3" ref="uUpload" :show-progress="false"
					:action="`https://api-test.sixbg.com/oss/file/upload`" :auto-upload="false"
					@on-uploaded="onuploaded" @on-list-change="onchange" @on-remove="onRemove1" :file-list="fileList1"
					@on-success="successUpload1" :form-data="{groupName :'coverImg'}">
				</u-upload>
				
				<!-- <u-upload :width="148" :height="148" maxCount="3" ref="uUpload" :show-progress="false"
					:action="`https://api-test.sixbg.com/oss/file/upload`" :auto-upload="true" @on-remove="onRemove1"
					:file-list="fileList1" @on-success="successUpload1" :form-data="{groupName :'coverImg'}">
				</u-upload> -->
			</view>

		</view>
		<!-- 备注 -->
		<view class="dif">
			<view class="title">
				备注
			</view>
			<view class="intro intro1">
				<view style="height: 132rpx;">
					<u-input placeholder="填写详细描述" :border="false" :maxlength="300" :height="120" :auto-height="false"
						v-model="remark" type="textarea" />

				</view>
				<view class="max">
					{{remark.length}}/300
				</view>
			</view>
		</view>

		<view class="botBox">
			<view class="item1">
				<u-button  :disabled="btnFlags"  shape="circle" type="error" @click="submit" :ripple="true" ripple-bg-color="#d7d8da">提交审核
				</u-button>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				remark: '',

				cardTypeId: '',
				cur: 0,
				fileList11: [],
				fileList1: [],
				info: null,
				priceList: [],
				nickName: "",
				photo: '',
				attributes: '',
				bgColor: '',
				cardTypeName: '',
				memberId: '',
				curInfo: null
			}
		},
		onLoad(e) {
			console.log(e, 3333);
			this.nickName = e.nickName
			this.photo = e.photo
			this.attributes = e.attributes
			this.bgColor = e.bgColor
			this.cardTypeName = e.cardTypeName
			this.memberId = e.id
			this.getPriceList(e) //获取会员列表

		},
		methods: {
			// 获取会员列表
			getPriceList(e) {
				this.$u.api.vipOpenRecordList({
						memberId: e?.id,
						type: e.type //0开通，1升级，2续费
					})
					.then(res => {
						this.priceList = res?.data

						this.getCurPrice(res?.data?. [0]?.id)
						
						this.cardTypeId =res?.data?. [0]?.id
					});
			},
			
			onchange(lists, name) {
				if (lists.length) {
					this.loadFlag = true
				}
				console.log(lists, name, 333);
			},
			onuploaded(lists, name) {
				if (lists.length) {
					this.fileList11 = lists?.map(r => {
						return r?.response?.data
					})
					
					
					let query = {
						memberId: this.memberId,
						cardTypeId: this.cardTypeId,
						fileList: this.fileList11,
						description: this.remark
					}
					this.$u.api.vipOpenRecordAdd(query)
						.then(res => {
							console.log(res, 43567);
							if (res.code == 'ok') {
								this.loadFlag = false
								this.btnFlags = false
								uni.hideLoading()
								uni.redirectTo({
									url: "/subPack/openingRecord/index"
								})
							}else{
								this.loadFlag = false
								this.btnFlags = false
								uni.hideLoading()
								uni.showToast({
									icon:'none',
									title:res.msg,
									duration:5000
								})
							}
						});
					// let query = {
					// 	memberId: this.memberId,
					// 	cardTypeId: this.cardTypeId,
					// 	fileList: this.fileList11,
					// 	description: this.remark
					// }
					// this.$u.api.vipOpenRecordAdd(query)
					// 	.then(res => {
					// 		if (res.code == 'ok') {
					// 			this.loadFlag = false
					// 			this.btnFlags = false
					// 			uni.hideLoading()
					// 			uni.redirectTo({
					// 				url: "/subPack/openingRecord/index"
					// 			})
					// 		} else {
					// 			this.loadFlag = false
					// 			this.btnFlags = false
					// 			uni.hideLoading()
					// 			uni.showToast({
					// 				icon: 'none',
					// 				title: res.msg,
					// 				duration: 5000
					// 			})
					// 		}
					// 	});
				} else {
			
					uni.showToast({
						icon: 'none',
						title: "请上传支付截图"
					})
				}
			},
			
			
			
			submit() {
				// if (!this.fileList11.length) {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: "请上传支付截图"
				// 	})
				// 	return
				// }
				if (!this.cardTypeId) {
					uni.showToast({
						icon: 'none',
						title: "请选择套餐"
					})
					return
				}
				
				
				if (this.loadFlag) {
					this.$refs.uUpload.upload();
					uni.showLoading({
						title: '加载中...'
					})
					this.btnFlags = true
				} else {
					this.$refs.uUpload.upload();
				}

				
			},
			tab(index, item) {
				this.cardTypeId = item.id
				this.cur = index
				this.getCurPrice(this.cardTypeId)
			},
			getCurPrice(cardTypeId) {
				this.$u.api.vipOpenRecordSelect({
						cardTypeId,
						memberId: this.memberId
					})
					.then(res => {
						console.log(res.data, 43567);
						this.curInfo = res?.data
					});
			},

			successUpload1(data, index, lists) {
				let url = data.data;
				this.fileList11.push(url);
			},
			onRemove1(index) {
				this.fileList11.splice(index, 1);
			},
		}
	}
</script>

<style scoped lang="scss">
	/deep/ .u-input__textarea{
		height: 66px !important;
		text-align: left !important; 
	}
	.activateMembership {
		padding: 0 40rpx;

		.tips {
			display: flex;

			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 12rpx;
			}

			.infos {
				flex: 1;
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 24rpx;
				color: rgba(15, 20, 23, 0.6);
				line-height: 36rpx;
				margin-top: -5rpx;
			}
		}

		.old {
			.title1 {
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 500;
				font-size: 40rpx;
				color: #FA4A53;
				line-height: 47rpx;
				padding: 0 0 24rpx;
			}

			.listbox {

				// border-bottom: 2rpx solid #F6F6F6;
				.items1 {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 30rpx;

					.left {
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 28rpx;
						color: #0F1417;
						line-height: 33rpx;
					}

					.right {
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 500;
						font-size: 32rpx;
						color: #0F1417;
						line-height: 38rpx;

						&.pay {
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 700 !important;
							font-size: 30rpx;
							color: #FA4A53 !important;
							line-height: 33rpx;
						}
					}
				}
			}
		}

		.botBox {
			padding: 42rpx 0;
			// z-index: 998;
			// position: fixed;
			// left: 40rpx;
			// bottom: 90rpx;
			// padding-bottom: env(safe-area-inset-bottom);
			// right: 40rpx;

			.item1 {
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				box-shadow: 0rpx 20rpx 24rpx 0rpx rgba(181, 36, 44, 0.2);
			}
		}

		.intro {

			padding: 6rpx 16rpx 0;

			background: #F1F1F1;
			border-radius: 10rpx 10rpx 10rpx 10rpx;

			&.intro1 {
				height: 176rpx;
				// margin-top: 24rpx;
			}

			/deep/ .u-input__input {
				text-align: left !important;
				// margin-right: 24rpx;
			}

			/deep/ textarea,
			uni-textarea {
				height: 60px;
			}

			.max {
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 24rpx;
				color: rgba(15, 20, 23, 0.4);
				line-height: 28rpx;
				text-align: right;
			}
		}

		.photos {
			background: #FFFFFF;
			padding:0;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			// margin-bottom: 24rpx;

			.open {
				margin-top: 16rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 28rpx;
				color: #0F1417;
				line-height: 33rpx;
			}

			.tit {
				margin-bottom: 18rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: center;

					>text:nth-child(1) {
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 500;
						font-size: 28rpx;
						color: #0F1417;
						line-height: 40rpx;
					}

					>text:nth-child(2) {
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 24rpx;
						color: rgba(15, 20, 23, 0.4);
						line-height: 28rpx;
					}
				}

				.right {
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 24rpx;
					color: rgba(15, 20, 23, 0.4);
					line-height: 28rpx;
				}
			}
		}

		.title {
			padding: 24rpx 0 16rpx;
		}

		.package {


			.list {
				display: flex;
				flex-wrap: wrap;

				.item {
					width: 48%;
					height: 200rpx;
					background: #FFFFFF;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					border: 2rpx solid #E6E6E6;
					margin-right: 4%;
					position: relative;
					overflow: hidden;
					margin-bottom: 24rpx;

					.tag {
						background: #FFF0F1;
						position: absolute;
						left: 0;
						top: 0;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 500;
						font-size: 24rpx;
						color: #FA4A53;
						height: 36rpx;
						display: flex;
						padding: 0 16rpx;
						align-items: center;
						justify-content: center;
						border-radius: 0 0 12rpx 0;
					}

					.day {

						padding-top: 42rpx;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 500;
						font-size: 28rpx;
						color: #0F1417;
						line-height: 33rpx;
						text-align: center;
					}

					.money {
						padding: 10rpx 0;
						margin-bottom: 8rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						.old {
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 500;
							font-size: 24rpx;
							color: #6F6F71;
							line-height: 28rpx;
						}

						.now {
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 500;
							font-size: 28rpx;
							color: #FA4A53;
							line-height: 33rpx;
						}
					}

					.service {
						position: absolute;
						bottom: 0;
						left: 0;
						right: 0;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 500;
						font-size: 24rpx;
						color: #FA4A53;
						line-height: 28rpx;
						height: 44rpx;
						background: #FFF0F1;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					&:nth-child(2n) {
						margin-right: 0;
					}

					&.active {
						background: #FFF0F1 !important;
						border: 2rpx solid #FA4A53 !important;

						.service {
							background: #FA4A53 !important;
							color: #FFFFFF;
						}

						.tag {
							background: #FA4A53 !important;
							color: #FFFFFF;
						}
					}
				}
			}
		}

		.header {
			padding-bottom: 24rpx;
			border-bottom: 2rpx solid #F5F5F5;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;

				image {
					width: 93rpx;
					height: 93rpx;
					margin-right: 26rpx;
				}

				.info {
					flex: 1;

					.top {
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 28rpx;
						color: #0F1417;
						line-height: 40rpx;
						margin-bottom: 8rpx;
					}

					.bot {
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 24rpx;
						color: rgba(15, 20, 23, 0.6);
					}
				}
			}

			.tags {
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 24rpx;
				color: #0F1417;
				line-height: 20rpx;
				color: #0F1417;
				background: #EDEFF0;
				border-radius: 48rpx 48rpx 48rpx 48rpx;
				padding: 8rpx 16rpx;

				&.base {
					color: #E7EDF4 !important;
					background: #252E3C !important;
				}

				&.golden {
					color: #FFE1CF !important;
					background: #A06D08 !important;
				}

				&.baijin {
					color: #FFE1CF !important;
					background: #4B1C00 !important;
				}

				&.zuanshi {
					color: #D0EAF9 !important;
					background: #3E5980 !important;
				}
			}
		}
	}
</style>
